<template>
  <view class="withdraw-container">
    <!-- 顶部余额概览卡片 -->
    <view class="balance-card">
      <view class="balance-bg"></view>
      <view class="balance-header">
        <view class="balance-title">我的余额</view>
        <view class="balance-value">¥{{ userInfo.balance }}</view>
      </view>
      <view class="balance-stats">
        <view class="stat-item">
          <text class="stat-value">¥{{ userInfo.balance }}</text>
          <text class="stat-label">可提现</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">¥{{ userInfo.freeze_money }}</text>
          <text class="stat-label">冻结中</text>
        </view>
      </view>
    </view>

    <!-- 提现记录按钮 -->
   

    <!-- 提现金额输入 -->
    <view class="withdraw-input-section">
      <view class="section-title">提现金额</view>
      <view class="amount-input-wrapper">
        <text class="currency-symbol">¥</text>
        <input type="digit" class="amount-input" v-model="withdrawAmount" placeholder="请输入提现金额"
          @input="validateAmount" />
      </view>
      <view class="amount-tips">
        <text>可提现余额: ¥{{ userInfo.balance }}</text>
        <text class="all-btn" @tap="setMaxAmount">全部提现</text>
      </view>
      <view class="error-msg" v-if="errorMsg">{{ errorMsg }}</view>
    </view>

    <!-- 提现方式  -->
    <view class="withdraw-method-section">
      <view class="section-title">提现方式</view>
      <view class="method-list">
        <view class="method-item active">
          <view class="method-icon wechat-icon">

          </view>
          <view class="method-info">
            <view class="method-name">微信</view>
            <view class="method-account">{{ userInfo.nickName }}</view>
          </view>
          <view class="method-check"></view>
        </view>
      </view>
    </view>

    <!-- 提现说明 -->
    <view class="withdraw-notice">
      <view class="notice-title">
        <text class="notice-icon">!</text>
        <text>提现说明</text>
      </view>
      <view class="notice-items">
        <rich-text :nodes="cash_desc"></rich-text>
      </view>
    </view>

    <!-- 底部提现按钮 -->
    <view class="withdraw-submit">
      <view class="fee-info">
        <text>手续费: {{ setting.deduct }}% </text>
        <text class="divider">|</text>
        <text>预计到账: ¥{{ real_money }}</text>
      </view>
      <button class="submit-btn" :disabled="!canSubmit" @tap="submitWithdraw">确认提现</button>
    </view>

    <!-- 提现结果弹窗 -->
    <view class="result-modal" v-if="showResultModal">
      <view class="modal-mask"></view>
      <view class="result-content">
        <view class="result-icon">
          <view class="success-icon" v-if="withdrawSuccess"></view>
          <view class="fail-icon" v-else></view>
        </view>
        <view class="result-title">{{ withdrawSuccess ? '提现申请成功' : '提现申请失败' }}</view>
        <view class="result-desc">{{ resultMessage }}</view>
		<view class="result-btn-wrap" @click="showResultModal=false">
			<view class="result-btn">知道了</view>
		</view>
      </view>
    </view>

    <!-- 绑定微信账户弹窗 -->
    <view class="bind-modal" v-if="showBindModal">
      <view class="modal-mask" @tap="closeBindModal"></view>
      <view class="bind-content">
        <view class="bind-title">绑定微信</view>
        <view class="close-icon" @tap="closeBindModal">×</view>
        <view class="bind-tip">请确认微信实名为本人，否则将无法提现</view>
        <button class="wechat-bind-btn" @tap="bindWechat">使用微信号登录绑定</button>
      </view>
    </view>
  </view>
</template>

<script>
import { userStore } from '@/store/userStore';
import { withdrawApi, getInfo, withdrawLogApi,withdrawSetApi } from '../../api/user';
import { textareaCon } from '../../utils';
const user = userStore();
export default {
  data() {
    return {
      withdrawAmount: '',
      errorMsg: '',
      showResultModal: false,
      withdrawSuccess: false,
      resultMessage: '',
      showBindModal: false,
	  setting:{}
    }
  },
  onLoad() {
    // 页面加载时刷新用户信息
    this.refreshUserInfo();
	withdrawSetApi().then(res=>{
		this.setting = res
	})
  },
  computed: {
	  cash_desc(){
		   return textareaCon(this.setting.desc || "")
	  },
    canSubmit() {
      const amount = parseFloat(this.withdrawAmount);
      return amount >= this.setting.min_amount &&
        amount <= this.userInfo.balance &&
        !this.errorMsg;
    },
    userInfo() {
      return user.userInfo;
    },
	real_money(){
		if(this.withdrawAmount>0){
			let deduct = this.setting.deduct || 0
			return (parseFloat(this.withdrawAmount)*(1-deduct/100)).toFixed(2)
		}
		else{
			return 0
		}
	}
  },
  methods: {
    validateAmount() {
      this.errorMsg = '';

      const amount = parseFloat(this.withdrawAmount);
      if (isNaN(amount)) {
        this.errorMsg = '请输入有效金额';
        return;
      }

      if (amount < 1) {
        this.errorMsg = '提现金额最低1元';
        return;
      }

      if (amount > 50000) {
        this.errorMsg = '单笔提现不能超过50000元';
        return;
      }

      if (amount > this.userInfo.balance) {
        this.errorMsg = '可提现余额不足';
        return;
      }
    },

    setMaxAmount() {
      this.withdrawAmount = this.userInfo.balance;
      this.validateAmount();
    },

    calculateFee() {
      const amount = parseFloat(this.withdrawAmount) || 0;
      // 手续费率为0.6%，最低1元
      let fee = amount * 0.006;
      return fee < 1 ? (amount > 0 ? 1 : 0) : fee;
    },

    calculateActual() {
      const amount = parseFloat(this.withdrawAmount) || 0;
      return amount - this.calculateFee();
    },

    showBindWechat() {
      this.showBindModal = true;
    },

    bindWechat() {
      uni.showLoading({
        title: '绑定中...'
      });

      setTimeout(() => {
        uni.hideLoading();
        this.wechatAccount = '微信用户';

        uni.showToast({
          title: '绑定成功',
          icon: 'success'
        });

        this.closeBindModal();
      }, 1000);
    },

    closeBindModal() {
      this.showBindModal = false;
    },

    submitWithdraw() {
      // 检查微信账户是否已绑定
      // if (!this.wechatAccount) {
      //   this.showBindModal = true;
      //   return;
      // }

      // 再次验证提现金额
      this.validateAmount();
      if (this.errorMsg) {
        uni.showToast({
          title: this.errorMsg,
          icon: 'none'
        });
        return;
      }

      // 显示加载状态
      uni.showLoading({
        title: '提交中...'
      });

      // 构建提现参数
      const amount = parseFloat(this.withdrawAmount);
      //const actual = this.calculateActual();
      //const fee = this.calculateFee();

      const params = {
        money: amount,          // 提现金额
        pay_type: 10,         // 提现方式
      };
      // 尝试调用提现API
      withdrawApi(params).then(res => {
        handleWithdrawSuccess();
      }).catch(err => {
        console.error('提现失败:', err);
      });
      
      // 处理提现成功逻辑
      const handleWithdrawSuccess = () => {
        uni.hideLoading();
        
        // 显示提现成功结果
        this.withdrawSuccess = true;
        this.resultMessage = `提现申请已提交，请等待审核，预计1-3个工作日到账。提现金额：¥${amount.toFixed(2)}，手续费率：${this.setting.deduct}%，预计到账：¥${this.real_money}`;
        this.showResultModal = true;
		
        // 刷新用户信息，以获取最新的账户余额
        setTimeout(() => {
          this.refreshUserInfo();
        }, 500);
        
        // 重置提现金额
        this.withdrawAmount = '';
      }
    },

    closeResultModal() {
      this.showResultModal = false;
    },

    // 添加refreshUserInfo方法
    refreshUserInfo() {
      user.fetchUserInfo()
    },

    viewWithdrawRecord() {
      this.closeResultModal();
      this.navigateToWithdrawRecord();
    },
  }
}
</script>

<style>
.withdraw-container {
  background-color: #F8F6F1;
  min-height: 100vh;
  padding-bottom: 150rpx;
}

/* 顶部余额卡片样式 */
.balance-card {
  position: relative;
  margin: 30rpx;
  height: 320rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}

.balance-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #E2C675, #C8A950);
  z-index: 1;
}

.balance-header {
  position: relative;
  padding: 30rpx;
  z-index: 2;
}

.balance-title {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10rpx;
}

.balance-value {
  font-size: 72rpx;
  color: #FFFFFF;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.balance-stats {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.1);
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 32rpx;
  color: #FFFFFF;
  font-weight: bold;
  margin-bottom: 6rpx;
}

.stat-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 0.3);
}

/* 提现金额输入区域 */
.withdraw-input-section {
  margin: 30rpx;
  padding: 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 30rpx;
  color: #4D3F33;
  margin-bottom: 30rpx;
  font-weight: bold;
}

.amount-input-wrapper {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #EEEAE0;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
}

.currency-symbol {
  font-size: 48rpx;
  color: #4D3F33;
  margin-right: 20rpx;
  font-weight: bold;
}

.amount-input {
  flex: 1;
  font-size: 48rpx;
  color: #4D3F33;
  font-weight: bold;
}

.amount-tips {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #A89B88;
}

.all-btn {
  color: #78A77F;
}

.error-msg {
  margin-top: 20rpx;
  color: #E57373;
  font-size: 24rpx;
}

/* 提现方式 */
.withdraw-method-section {
  margin: 30rpx;
  padding: 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.method-list {
  border-radius: 12rpx;
  overflow: hidden;
}

.method-item {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  position: relative;
  background-color: rgba(120, 167, 127, 0.05);
}

.method-icon {
  width: 64rpx;
  height: 64rpx;
  margin-right: 20rpx;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.wechat-icon {
  background-image: url('https://wx.qlogo.cn/mmhead/Q3auHgzwzM5xae5R5PCpOBWWHIU5FuowyE8RMzfpkDn0SIPgI24SHQ/0');
}

.method-info {
  flex: 1;
}

.method-name {
  font-size: 28rpx;
  color: #4D3F33;
  margin-bottom: 6rpx;
}

.method-account {
  font-size: 24rpx;
  color: #A89B88;
}

.method-bind {
  font-size: 24rpx;
  color: #78A77F;
  text-decoration: underline;
}

.method-check {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 1rpx solid #EEEAE0;
  position: relative;
}

.method-item.active .method-check:after {
  content: '';
  position: absolute;
  width: 24rpx;
  height: 24rpx;
  background-color: #78A77F;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 提现说明 */
.withdraw-notice {
  margin: 30rpx;
  padding: 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.notice-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  color: #4D3F33;
  font-weight: bold;
}

.notice-icon {
  display: inline-block;
  width: 36rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  background-color: #E2C675;
  color: #FFFFFF;
  border-radius: 50%;
  margin-right: 10rpx;
  font-weight: bold;
}

.notice-items {
  color: #A89B88;
  font-size: 24rpx;
}

.notice-item {
  margin-bottom: 10rpx;
  line-height: 1.6;
}

/* 底部提现按钮 */
.withdraw-submit {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FFFFFF;
  padding: 20rpx 30rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.fee-info {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
  font-size: 24rpx;
  color: #A89B88;
}

.divider {
  margin: 0 20rpx;
  color: #EEEAE0;
}

.submit-btn {
  background-color: #78A77F;
  color: #FFFFFF;
  border-radius: 50rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
}

.submit-btn[disabled] {
  background-color: #CCCCCC;
  color: #FFFFFF;
}

/* 结果弹窗 */
.result-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.result-content {
  background-color: #FFFFFF;
  width: 560rpx;
  padding: 50rpx 30rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.result-icon {
  margin-bottom: 30rpx;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  background-color: rgba(120, 167, 127, 0.1);
  border-radius: 60rpx;
  position: relative;
}

.success-icon:before,
.success-icon:after {
  content: '';
  position: absolute;
  background-color: #78A77F;
}

.success-icon:before {
  width: 30rpx;
  height: 60rpx;
  transform: rotate(45deg);
  top: 50%;
  left: 50%;
  margin-top: -18rpx;
  margin-left: -5rpx;
}

.success-icon:after {
  width: 30rpx;
  height: 30rpx;
  transform: rotate(45deg);
  top: 50%;
  left: 30%;
  margin-top: 8rpx;
}

.fail-icon {
  width: 120rpx;
  height: 120rpx;
  background-color: rgba(229, 115, 115, 0.1);
  border-radius: 60rpx;
  position: relative;
}

.fail-icon:before,
.fail-icon:after {
  content: '';
  position: absolute;
  width: 60rpx;
  height: 10rpx;
  background-color: #E57373;
  top: 50%;
  left: 50%;
  margin-top: -5rpx;
  margin-left: -30rpx;
}

.fail-icon:before {
  transform: rotate(45deg);
}

.fail-icon:after {
  transform: rotate(-45deg);
}

.result-title {
  font-size: 36rpx;
  color: #4D3F33;
  margin-bottom: 20rpx;
  font-weight: bold;
}

.result-desc {
  font-size: 28rpx;
  color: #A89B88;
  text-align: center;
  margin-bottom: 40rpx;
  line-height: 1.6;
}

.result-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 30rpx;
}

.result-btn {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(135deg, #E2C675, #C8A950);
  color: #FFF;
  border-radius: 40rpx;
  font-size: 30rpx;
  margin-bottom: 20rpx;
  text-align: center;
}

.result-record-btn {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  background: #FFFFFF;
  color: #C8A950;
  border: 1rpx solid #C8A950;
  border-radius: 40rpx;
  font-size: 30rpx;
}

/* 账户绑定弹窗 */
.bind-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
}

.bind-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 40rpx 40rpx 0 0;
  padding: 40rpx 30rpx;
  z-index: 2;
}

.bind-title {
  font-size: 36rpx;
  color: #4D3F33;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}

.close-icon {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  font-size: 48rpx;
  color: #A89B88;
  line-height: 1;
}

.bind-tip {
  font-size: 28rpx;
  color: #E57373;
  text-align: center;
  margin-bottom: 30rpx;
}

.wechat-bind-btn {
  background-color: #09BB07;
  color: #FFFFFF;
  border-radius: 40rpx;
  height: 80rpx;
  line-height: 80rpx;
}

/* 提现记录按钮 */
.record-btn-wrapper {
  position: fixed;
  top: 30rpx;
  right: 30rpx;
  z-index: 10;
}

.record-btn {
  background-color: #78A77F;
  color: #FFFFFF;
  border-radius: 40rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
}
</style>